<template>
  <div class="login-tab">
    <div class="login-nav">
        <div 
            :class="['nav-item',{active : item === curNav}]"
            v-for="item of navData"
            :key="item"
            @click="clickNav(item)"
        >{{ item }}</div>
    </div>
    <div class="login-component">
        <!-- 缓存组件状态 -->
        <keep-alive>
            <!-- 动态组件 -->
            <component :is="changeComponent"></component>
        </keep-alive>
    </div>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue';
import Identity from './Identity.vue';

// 异步组件 按需加载
const Myqrcode = defineAsyncComponent(() => import('./Myqrcode.vue'));
const Mobile = defineAsyncComponent(() => import('./Mobile.vue'));

export default {
    name: 'login-tab',
    components: {
        Identity,
        Myqrcode,
        Mobile
    },
    data() {
        return {
            navData: ['Identity', 'Myqrcode', 'Mobile'],
            curNav: 'Identity'
        }
    },
    methods: {
        clickNav(item) {
            this.curNav = item;
        }
    },
    computed: {
        changeComponent(){
            return this.curNav.toLowerCase();
        }
    }
}
</script>

<style lang="scss">
.login-tab {
    width: 600px;
    margin: 50px auto;
    border: 1px solid #333;
    box-sizing: border-box;

    .login-nav {
        height: 44px;
        border-bottom: 1px solid #333;

        .nav-item {
            float: left;
            padding: 0 30px;
            line-height: 44px;
            text-align: center;
            box-sizing: border-box;
            cursor: pointer;

            &.active {
                background-color: #333;
                color: #fff;
            }
        }
    }
}
</style>
